@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    * {
        @apply m-0 p-0 box-border;
    }

    body {
        @apply bg-dark-900 text-gray-100 min-h-screen;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    #root {
        @apply min-h-screen;
    }
}

@layer components {
    .btn-primary {
        @apply px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all duration-200 shadow-lg shadow-blue-600/30 hover:shadow-blue-600/50;
    }

    .btn-secondary {
        @apply px-6 py-2.5 bg-dark-700 hover:bg-dark-600 text-gray-300 hover:text-white rounded-lg font-medium transition-all duration-200 border border-dark-600;
    }

    .btn-danger {
        @apply px-4 py-2 bg-red-600/20 hover:bg-red-600/30 text-red-400 hover:text-red-300 rounded-lg font-medium transition-all duration-200 border border-red-600/30;
    }

    .input-field {
        @apply w-full px-4 py-3 bg-dark-800 border border-dark-600 rounded-lg text-gray-100 placeholder-gray-500 focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 transition-all duration-200;
    }

    .card {
        @apply bg-dark-800 border border-dark-700 rounded-xl p-6 shadow-xl;
    }
}